<template>
  <view class="containerBox" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="containerContent">
      <view class="title" v-if="propsData.params.useTitle == 1">
        <moduleHeader
          :propsData="propsData"
          :moduleName="moduleName"
        ></moduleHeader>
      </view>
      <view class="container">
        <image
          class="image"
          @click="toUrl(propsData.params.current)"
          lazy-load
          :src="propsData.params.current.picUrl"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import moduleHeader from "../components/moduleHeader/index.vue";
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  components: {
    moduleHeader,
  },
  mixins: [diyMixin],
  computed: {
    moduleName() {
      return this.propsData.params.text;
    },
  },
  mounted() {},
  methods: {
    toUrl(e) {
      this.$utils.diySkip(e.link);
    },
  },
};
</script>

<style lang="scss" scoped>
.containerBox {
  width: 100%;
  position: relative;
}
.containerContent {
  .title {
    padding: 24rpx;
  }
}
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}

.image {
  display: block;
  width: 100%;
}
</style>
